<template>
	<view class="pageBox">
		<!-- 顶部导航 -->
		<iot-navbar title="点点控" :right-type-index="rightIndex" />
		<!-- 页面端 -->
		<home v-if="tabberIndex === 0" />
		<device v-if="tabberIndex === 1" />
		<message v-if="tabberIndex === 3" />
		<user v-if="tabberIndex === 4" />
		<!-- 底部导航 -->
		<iot-tabber @centerIcon="centerIconClick" />
	</view>
</template>

<script lang="ts" setup name="viewsPage">
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { reactive, ref, onMounted, computed, watch } from 'vue';
import home from './home/index.vue';
import device from './device/index.vue';
import message from './message/index.vue';
import user from './user/index.vue';
import { navigateTo, reLaunch } from '@/utils/pageJump.js';
import check from '@/utils/check.js';
import { useTabbar } from '@/pinia/tabber.js';
import { storeToRefs } from 'pinia'; // 导入 pinia 中暴露的数据转换为响应式的方法
const tabbar = useTabbar(); // 实例化 tabbar.js 中暴露的方法
const { tabberIndex } = storeToRefs(tabbar); // 转换为响应式数据
let rightIndex = ref(0); // 导航栏右侧type

// 监听tabberIndex属性
watch(
	tabberIndex,
	(newVal) => {
		console.log('tabberIndex---newVal', newVal);
		if (newVal == 3) {
			rightIndex.value = 3;
		} else {
			rightIndex.value = 0;
		}
	},
	{
		deep: true,
		immediate: true
	}
);
// 点击中间按钮
let centerIconClick = () => {
	console.log('中间按钮');
};
let oneClick = () => {
	navigateTo('/pages/loginBox/login/index');
};
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
	width: 45rpx;
	height: 45rpx;
	margin-bottom: 6rpx;
}
</style>
